:host {
  display: block;

  .activity-type-badge {
    background-color: rgba(var(--palette-foreground-text), 0.05);
    border-radius: 1rem;
    line-height: 1em;

    ion-icon {
      font-size: 1rem;
    }

    &.buy {
      color: var(--green);
    }

    &.dividend {
      color: var(--blue);
    }

    &.fee {
      color: var(--gray);
    }

    &.interest {
      color: var(--cyan);
    }

    &.liability {
      color: var(--red);
    }

    &.sell {
      color: var(--orange);
    }
  }
}

:host-context(.theme-dark) {
  .activity-type-badge {
    background-color: rgba(var(--palette-foreground-text-dark), 0.1) !important;
  }
}
